<template>
  <!-- 用户组织关系对象，组织成员 表单页面 -->
  <div v-if="crud.status.cu > 0">
    <el-drawer
      :title="title"
      :visible.sync="crud.status.cu > 0"
      direction="rtl"
      :before-close="crud.cancelCU"
      :wrapper-closable="false"
      size="400px"
    >
      <div class="leisure-drawer__content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="100px"
        >

          <el-form-item v-show="false" label="用户id" prop="userId">
            <el-input v-model="form.userId" placeholder="请输入用户id" :readonly="true" />
          </el-form-item>
          <el-form-item label="用户" prop="username">
            <el-tag size="small">{{ username }}{{ nickname ?'：'+nickname:'' }}</el-tag>
          </el-form-item>

          <el-form-item label="加入组织" prop="depId">
            <el-input v-show="false" v-model="form.depId" placeholder="请指定组织" :readonly="true" />
            <el-tag size="small" type="success">{{ depName }}</el-tag>
          </el-form-item>

          <el-form-item label="姓名" prop="memberName">
            <el-input v-model="form.memberName" placeholder="请输成员姓名" clearable />
          </el-form-item>

          <el-form-item label="成员编号" prop="userEmployeeNum">
            <el-input v-model="form.userEmployeeNum" placeholder="请输入员工/成员编号" clearable />
          </el-form-item>

          <el-form-item label="授权角色" prop="roleIds">
            <el-select v-model="form.roleIds" placeholder="请选择角色" filterable style="width: 100%" clearable multiple>
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.status === 0"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.remark }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属岗位" prop="stationId">
            <el-select v-model="form.stationId" placeholder="请选择岗位" filterable style="width: 100%" clearable>
              <el-option
                v-for="item in stations"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.status === 0"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.depName }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="岗位职级" prop="positionCode">
            <!-- 智能推断为字典类型, 字典类型为 dict.sys_user_dep_position_code -->
            <el-select v-model="form.positionCode" clearable placeholder="请选择岗位职级" style="width: 100%">
              <el-option
                v-for="positionCode in dict.sys_user_dep_position_code"
                :key="positionCode.key"
                :label="positionCode.value"
                :value="Number(positionCode.key)"
              />
            </el-select>
          </el-form-item>

          <!-- 数据权限 1 查看个人数据  2 查看本部门数据 4.当前组织以及下级数据 8:查看指定部门数据 -->
          <el-form-item label="数据权限" prop="dataLevel">
            <!-- 智能推断为字典类型, 字典类型为 dict.sys_user_dep_data_level -->
            <el-select v-model="form.dataLevel" clearable placeholder="请选择数据权限" style="width: 100%">
              <el-option
                v-for="dataLevel in sysUserDepDataLevel"
                :key="dataLevel.value"
                :label="dataLevel.label"
                :value="Number(dataLevel.value)"
                :disabled="dataLevel.disabled"
              />
            </el-select>
          </el-form-item>

          <!-- 0：申请加入，待审核；1：正常；2：审核不通过，待完善信息；   -1 ：离职，删除 -->
          <!-- 状态值 -->
          <el-form-item label="成员状态" prop="status">
            <el-select v-model="form.status" clearable placeholder="请选择数据权限" style="width: 100%">
              <el-option
                v-for="status in memberStatus"
                :key="status.value"
                :label="status.label"
                :value="Number(status.value)"
                :disabled="status.disabled"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="联系地址" prop="linkAddress">
            <el-input v-model="form.linkAddress" type="textarea" placeholder="请输入联系地址" clearable />
          </el-form-item>

        </el-form>

        <div class="leisure-drawer__footer">
          <el-button
            @click="crud.cancelCU"
          >
            取消
          </el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import CRUD, { form } from '@crud/crud'
import defaultModel, { sysUserDepDataLevel, memberStatus } from './model'
import { list as stationList } from '@/api/sys/Station'
import { listForDepEnable } from '@/api/sys/Role'
import { getRolesByUserAndDep } from '@/api/sys/UserRole'
// 用户组织关系对象，组织成员 - model
const defaultForm = defaultModel
export default {
  mixins: [form(defaultForm)],
  dicts: [
    'sys_user_dep_position_code'
  ], // 字典
  props: {
    userId: {
      type: [String, Number],
      default: null,
      describe: '用户id'
    },
    depId: {
      type: String,
      default: null,
      describe: '组织id'
    },
    depName: {
      type: String,
      default: null
    },
    username: {
      type: String,
      default: null
    },
    nickname: {
      type: String,
      default: null,
      describe: '用户名'
    }
  },
  data() {
    return {
      sysUserDepDataLevel: sysUserDepDataLevel, // 数据级别列表
      memberStatus: memberStatus, // 用户状态类别
      stations: [], // 岗位
      roles: [], // 角色
      rules: {

        memberName: [
          { required: true, message: '请输入成员或员工姓名', trigger: 'blur' }
        ],
        paixu: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  computed: {
    title: function() {
      return '【' + this.depName + '】' + this.crud.status.title
    }
  },
  mounted() {

  },
  methods: {
    [CRUD.HOOK.beforeValidateCU]() {
      if (!this.form.userId && this.userId) {
        this.form.userId = this.userId
      }
      if (!this.form.depId && this.depId) {
        this.form.depId = this.depId
      }
    },
    [CRUD.HOOK.beforeToCU]() {
      // 获取岗位列表
      stationList({ depId: this.$parent.depId }).then(res => {
        if (res && res.data) {
          this.stations = res.data
        }
      })
      listForDepEnable({ depId: this.$parent.depId }).then(res => {
        this.roles = res.data
      })
    },
    [CRUD.HOOK.afterToAdd](curd, form) {
      form.memberName = this.$parent.nickname
    },
    [CRUD.HOOK.afterToEdit](curd, form) {
      const params = {
        userId: this.form.userId,
        depId: this.form.depId
      }
      getRolesByUserAndDep(params).then(res => {
        if (res && res.data) {
          this.form.roleIds = []
          res.data.forEach(role => {
            this.form.roleIds.push(role.id)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

</style>
